<template>
  <el-row class="board-scroll-bar"
    :style="(playbook && playbook.frames && playbook.frames.length > 4) ? scroll: hidden">
    <div  
      class="board-pic-item"
      v-for="(item,index) in frameList"
      :class="{selected: item.selected}"
      :key="item.index + Math.random().toString(36).substr(2)">
      <img @click="switchFrame(index)"
        :width="120" :height="playbook.type == 'full'? 198 : 114" 
        :src="item.src">
      <i v-show="item.selected" class="icon iconfont icon-right">&#xe66e;</i>
      <i class="icon iconfont icon-wrong" @click.prevent="DeleteFrame(index)">&#xe66d;</i>
    </div>
  </el-row>
</template>
<script>
export default {
  props: {
    frameList: {
      type: Array,
      default: function () {
        return []
      }
    },
    playbook: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      hidden: {
        overflow: 'hidden'
      },
      scroll: {
        overflowX: 'scroll',
        overflowY: 'hidden'
      }
    }
  },
  methods: {
    switchFrame (index) {
      this.$emit('switch', index)
    },
    DeleteFrame (index) {
      this.$emit('delete', index)
    }
  }
}
</script>
<style lang="scss">
</style>